<template>
    <el-container class="common-layout">
        <el-aside width="200px" class="top-container"><LeftMenu /></el-aside>
        <el-container class="bottom-container">
            <el-header><Header /></el-header>
            <el-main>
                <!-- 路由标签导航栏 -->
                <el-header class="tags-header">
                    <div class="tags-container">
                        <el-tag
                            v-for="tag in tags"
                            :key="tag.path"
                            :closable="tag.path !== '/adminMain/userManage' && tag.path !== '/adminMain/agencyProjectsManage'"
                            size="large"
                            :disable-transitions="false"
                            @close="handleClose(tag)"
                            :effect="tag.path === route.path ? 'light' : 'plain'"
                            class="mx-1"
                        >
                            <router-link :to="tag.path">{{ tag.name }}</router-link>
                        </el-tag>
                    </div>
                </el-header>
                <!-- 页面内容 -->
                <el-main><router-view /></el-main>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { useRoute } from "vue-router";
import Header from "./Header.vue";
import LeftMenu from "./LeftMenu.vue";
import { onMounted, reactive, watchEffect } from "vue";
import { useRouter } from "vue-router";

// 获取当前用户身份
const { role } = JSON.parse(localStorage.getItem('user') || "");
const route = useRoute();
const router = useRouter();
// 定义一个名为 tags 的响应式数据对象，用于存储页面标签导航栏
// 初始加载时，管理员默认【用户管理】加入标签组，募捐机构默认【募捐项目管理】加入标签组
const tags = reactive<{name: string, path: string}[]>([
    role === "admin" ? { name: "捐赠者管理", path: "/adminMain/userManage" } : null,
    role === "agency" ? { name: "募捐项目管理", path: "/adminMain/agencyProjectsManage" } : null,
].filter(tag => tag !== null));

// 使用 watchEffect 监听当前路由变化，并根据当前路由自动添加新标签
watchEffect(() => {
    // 如果当前路径不是【用户管理】或者【募捐项目管理】并且该路径没有对应标签，则新增一个标签
    const condition1: boolean = role === 'admin' && route.path !== "/adminMain/userManage" && !tags.some(tag => tag.path === route.path);
    const condition2: boolean = role === 'agency' && route.path !== "/adminMain/agencyProjectsManage" && !tags.some(tag => tag.path === route.path);
    if (condition1 || condition2) {
        tags.push({ name: route.meta.title as string, path: route.path });
    }
});
/** 处理关闭标签事件 */
const handleClose = (tag: { name: string, path: string }) => {
    // 由于是 reactive 数组，所以要使用 splice 修改原数组而不能通过 filter
    const index = tags.findIndex(t => t.path === tag.path);
    if (index !==  -1) {
        // 跳转到前一个标签
        router.push(tags[index - 1].path);
        // 延迟执行，确保在路由跳转后再进行状态更新
        setTimeout(() => {
            tags.splice(index, 1);
        }, 0);
    }
};
</script>

<style scoped>
.common-layout {
    width: 100vw;
    height: 100vh;
}
.top-container {
    border-right: 1px solid #ccc;
}
.bottom-container {
    height: 100%;
}
.el-header {
    border-bottom: 1px solid #dcdfe6;
}
.el-main {
    padding: 0;
}
.tags-header {
    display: flex;
}
.tags-container {
    align-content: center;
}
.mx-1 {
  margin-right: 5px;
}
</style>